<!--
author: 月宴
datetime: 16:12
-->
<template>
  <div>
    <div class="blog_info_wrap">
      <el-card>
        <el-empty v-if="articleByTags.length <= 0"></el-empty>
        <div v-if="articleByTags.length >= 0">
          <el-row :gutter="20">
            <el-col class="animate__animated animate__fadeInUpBig" :span="6" v-for="(item,index) in articleByTags"
                    :key="index">
              <el-card class="card" :body-style="{ padding: '0px' }">
                <div style="overflow:hidden">
                  <el-image @click="routerArticleByTitle(item.articleTitle,item.articleUsername,item.articleId)"
                            style="width: 100%;height: 200px;cursor:pointer; " :fit="'fill'" :src="item.articleCover"
                            class="image"/>
                </div>
                <div style="padding: 14px;">
                  <h3 style="cursor:pointer"
                      @click="routerArticleByTitle(item.articleTitle,item.articleUsername,item.articleId)">
                    {{ item.articleTitle }}</h3>
                  <div class="bottom clearfix">
                    <time class="time">{{ item.createTime }}</time>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import BlogHomeSearch from "../home/BlogHomeSearch";

export default {
  name: "BlogListByTags",
  components: {
    BlogHomeSearch
  },

  data() {
    return {
      // cardArticle: false,
      articleByTags: [],
    }
  },

  methods: {
    /**
     * 子组件搜索到的内容
     */
    getSearchData(data) {
      console.log('父组件获取到的data = ', data)
    },

    /**
     * 查询分类
     */
    handleClassify(item) {
      // //显示这个card
      // this.cardArticle = true
      this.$request.getArticleByClassify(item, this.$user).then((data) => {
        this.articleByTags = data.data
      })
      console.log(item);
    },
    routerArticleByTitle(articleTitle, articleUsername, articleId) {
      this.$router.push({
        path: `/blogInfoById/${articleId}`,
      })
    }


  },

  created() {

    this.handleClassify(this.$route.params.classifyName);
  }

}
</script>

<style scoped>

.time {
  /*cursor:pointer;*/
  font-size: 13px;
  color: #999;
}


.blog_info_wrap {
  width: 80%;
  margin: auto;
  margin-top: 55px;

}

h3:hover {
  color: #00f2fe;
}

.card {
  height: 300px;
}

</style>
